<template>
	<view class="">
		<view class="bgf mb24 nav">
			<u-tabs :list="tab_list" lineWidth='64rpx' lineHeight='6rpx' lineColor="#2A71C0" :activeStyle="{
			            color: '#2A71C0',
						fontSize: '26rpx',
						transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#666666',
						fontSize: '26rpx',
						transform: 'scale(1)'
			        }" itemStyle="width: 14%;height: 81rpx" :current="current" @change="selectOrder">
			</u-tabs>
		</view>
		<view class="">
			<view class="" v-if="list.length>0">
				<view class="br12 bgf m2432 p24" v-for="item in list" @click="orderDetails(item)">
					<view class="flex_btw">
						<view class="fs28 c3 fw500 flex1 sn1 pr20">{{item.shop.title}}</view>
						<view class="flex_x">
							<image @click.stop="tel_map(1,item)" class="img40" src="/static/classify/tel.png" mode="">
							</image>
							<image @click.stop="tel_map(2,item)" class="img40 ml20" src="/static/classify//map.png"
								mode=""></image>
						</view>
					</view>
					<view class="cut_line mtb24"></view>

					<view class="">
						<view class="fs28 c2a7 pb10 fw500">
							<view v-if="current == 0 || current == 2">等待取货员取货</view>
							<view v-if="current == 1">等待取货员配送</view>
							<view v-if="current == 3">等待取货员送回</view>
							<view v-if="current == 4">已完成</view>
						</view>
						<view class="flex btw">
							<view class="flex1 flex">
								<view class="" v-for="itema in item.goods">
									<image class="img120 br12" :src="itema.image_str" mode="">
									</image>
									<view class="fs24 c3 sn1">{{itema.goods_name}}</view>
								</view>
							</view>
							<view class="ml10 right flex_x flex_y_end">
								<view class="pr10 fs22 c9">共{{item.total}}件</view>
								<view class="mt4">
									<u-icon name="arrow-right" color="#909090" size="24rpx"></u-icon>
								</view>
							</view>
						</view>
						<view class="cut_line mtb24"></view>
					</view>

					<view class="">
						<view class="flex_btw mb10">
							<view class="fs28 fw500 c3">本单预计收入</view>
							<view class="fw500 cfe4">
								<text class="fs24">￥</text>
								<text class="fs32">{{item.revenue_text}}</text>
							</view>
						</view>
						<view class="mb10 flex_x">
							<view class="fs24 c9 fw600 mr24">订单编号</view>
							<view class="fs24 c3 fw600 mr10">{{item.sn}}</view>
							<view class="flex_x" @click.stop="fz(item.sn)">
								<image class="img32" src="/static/sever/fz.png" mode=""></image>
							</view>
						</view>
						<view class="flex_x">
							<view class="fs24 c9 fw600 mr24">下单时间</view>
							<view class="fs24 c3 fw600">{{item.createtime_text}}</view>
						</view>
					</view>
					<!-- 			<view class="flex_y_end" v-if="current == 0" @click.stop="toPath(2)">
				<view class="fs26 cf bg2a7 br36  btn1 flex_c">扫码分配</view>
			</view> -->
					<view class="" v-if="current > 0">
						<view class="cut_line mtb24"></view>
						<view class="flex_btw">
							<view class="flex_x">
								<view class="fs24 c9 fw600 mr40">取货员</view>
								<view class="fs24 c3 fw600">小刘</view>
							</view>
							<view class="flex_x">
								<image class="img40" src="/static/classify/tel.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="" v-if="current > 2">
						<view class="cut_line mtb24"></view>
						<view class="flex_btw">
							<view class="flex_x">
								<view class="fs24 c9 fw600 mr40">送回员</view>
								<view class="fs24 c3 fw600">小李</view>
							</view>
							<view class="flex_x">
								<image class="img40" src="/static/classify/tel.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import tool from '../../../../utils/tool/tool.js'
	export default {
		props: {
			list: {
				default: []
			}
		},
		components: {},
		data() {
			return {
				tab_list: [{
					id: 2,
					name: '待取货'
				}, {
					id: 3,
					name: '配送中'
				}, {
					id: 5,
					name: '待送回'
				}, {
					id: 6,
					name: '送回中'
				}, {
					id: 8,
					name: '已完成'
				}],
				current: 0, //标识
			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			selectOrder(e) { //选择订单状态
			console.log(e);
				this.current = e.index;
				this.$parent.getPickOrderList(e.id);
			},
			fz(value) { //复制
				tool.copyText(value)
			},
			orderDetails(item) { //订单详情
				uni.navigateTo({
					url: `/pages/PickPerson/index/orderDetails/orderDetails?type=${this.current}&id=${item.id}`
				})
			},
			tel_map(e, item) { //1打电话 2地图
				if (e == 1) {
					uni.makePhoneCall({
						phoneNumber: item.shop.mobile //拨打电话
					});
				} else if (e == 2) {
					uni.openLocation({ //导航
						latitude: Number(item.shop.lat),
						longitude: Number(item.shop.lng),
						name: item.shop.address,
						success: () => {
							console.log('success');
						}
					});
				}
			}
		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		position: sticky;
		top: 0;
		z-index: 99;
	}

	.right {
		width: 120upx;
	}

	.btn1 {
		width: 200upx;
		height: 72upx;
		line-height: 72upx;
	}
</style>
